//浏览器对象

//1.window
//window对象不但充当全局作用域，而且还表示浏览器窗口
//window有innerWidth和innerHeight属性，可以获得浏览器窗口的宽度和高度 
//获取浏览器窗口大小
console.log('window inner size:'+window.innerWidth==='500px'+window.innerHeight+'50px'); //????????怎么调整大小
console.log('windoe outer size:'+window.outerWidth+'x'+window.outerHeight);



//2.navigator
///navigator表示浏览器信息，常用的属性包括
navigator.appName='浏览器名称'
navigator.appVersion='浏览器版本'
navigator.language='浏览器设置的语言'
navigator.platform='操作系统类型'
navigator.userAgent='浏览器设置的user-Agent的字符串'

console.log('浏览器名称='+navigator.appName);
console.log('浏览器版本='+navigator.appVersion);
console.log('浏览器设置的语言='+navigator.language);
console.log('操作系统类型='+navigator.platform);
console.log('浏览器设置的user-Agent的字符串='+navigator.userAgent);


//3.screen
////screen表示屏幕的信息，常用的属性有
screen.width='屏幕宽度，以像素为单位'
screen.height='屏幕高度'
screen.colorDepth='返回的颜色位数，如8、19、24'
console.log('screen.size='+screen.width+'x'+screen.height);


//location
///location对象表示当前页面的URL信息，例如，一个完整的URL信息：http://www.example.com:8080/path/index.html?a=1&b=2#TOP
//用location.href提取
console.log(location.href);
//若要获得URL各个部分的值，如下
console.log(location.protocol);  // 'http'
console.log(location.host);  // 'www.example.com'
console.log(location.port);   // '8080'
console.log(location.pathname);   // '/path/index.html'
console.log(location.search);   // '?a=1&b=2'
console.log(location.hash);    // 'TOP'

//加载一个新页面，可以使用location.assign;重新加载这个页面，可以使用location.reload;
/* if (confirm('重新加载当前页' + location.href + '?')) {
    location.reload();
} else {
    location.assign('/'); // 设置一个新的URL地址
}
 */


//5.document
///document的title属性是从HTML文档中的<title>xxx</title>读取的，但是可以动态改变：
document.title='努力学习JavaScript!'        //观察浏览器窗口的变化

//首先准备html数据
//用document对象提供的getElementById()和getElementsByTagName()可以按ID获得一个DOM节点和按Tag名获得一个节点
{/* <dl id="drink-menu" style="border:solid 1px #ccc;padding:6px;">
    <dt>摩卡</dt>
    <dd>热摩卡咖啡</dd>
    <dt>酸奶</dt>
    <dd>北京老酸奶</dd>
    <dt>果汁</dt>
    <dd>鲜榨苹果汁</dd>
</dl> */}
var menu=document.getElementById('drink-menu')
var drink=document.getElementsByTagName('dt')
var i,s;
s='提供的饮料有：';
for (i = 0; i < drink.length; i++) {
    s=s+drink[i].innerHTML+','
}
console.log(s);
//提供的饮料有：摩卡，酸奶，果汁，



//3-1更新DOM
////拿到一个DOM节点后，可以对他进行更新们可以直接修改节点的文本，方法有两种

//第一种是修改innerHTML属性
//获取<dl id="p-id">...</dl>
var p=document.getElementById("p-id")
//设置文本为ABC
p.innerHTML='ABC'   //<p id="p-id">ABC</p>
//设置HTML
p.innerHTML='ABCC <span style="color:red">RED</span> HHH'
///<p>...</p>的内部结构已被修改

//第二种是修改innerText属性和textContent属性
// 获取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 设置文本:
p.innerText = '<script>alert("Hi")</script>';
// HTML被自动编码，无法设置一个<script>节点:
//<p id="p-id">&lt;script&gt;alert("Hi")&lt;/script&gt;</p>
///innerText不返回隐藏元素的文本，而textContent返回所有文本。

// 获取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 设置CSS:
p.style.color = '#ff0000';  //颜色
p.style.fontSize = '20px';  //大小
p.style.paddingTop = '2em';   //与上面的间距


//练习


//3-2插入DOM节点
//当想要插入一个节点，应该怎么做？如果一个节点本来就是空的，如<div></div>,则直接使用innerHTML='插入'修改节点，即插入新节点；如果节点不是空的，则不能那么做
/* <!-- HTML结构 -->
<p id="js">JavaScript</p>
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
</div> */

//有两个办法可执行，一个是使用appendChild，把一个子节点插入到父节点的最后一个子节点

//把<p id="js">JavaScript</p>添加到<div id="list">的最后一项：
var 
    js=document.getElementById('js')
    list=document.getElementById('list');
list.appendChild(js)
//现在，HTML结构变成了这样
/* <div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
    <p id="js">JavaScript</p>
</div> */
//因为插入的节点已经存在于当前文档树，因此这个节点会从原先的位置删除，再插入新的位置

//更多时候从零创建新节点
var 
    list=document.getElementById('list')
    abb=document.createElement('abb')
abb.id='abb'
abb.innerHTML='ABB'
list.appendChild(abb)
//这样就动态添加了一个新节点
/* <div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
    <p id="js">JavaScript</p>
    <p id="abb">ABB</p>
</div> */




//删除DOM
////要删除一个节点，首先要获得一个父节点，然后调用父节点的removeChild把自己节点删掉
var self=document.getElementById('p-id')  //拿到待删除的节点
var parent=self.parentElement   //拿到父节点
var remove=parent.removeChild(self)   //删除
////删除后节点虽然不在文档树中，但依旧在内存中，可以添加到新的位置

//当在阅历一个父节点并对他进行删除时，注意children是一个只读属性，他在子节点变化时会实时更新
/* 对于如下HTML操作
<div id="parent">
    <p>First</p>
    <p>Second</p>
</div>
 */
var parent=document.getElementById('parent')
parent.removeChild(parent.children[0])
parent.removeChild(parent.children[1])   //控制台报错
//浏览器报错原因：parent.children[1]不是一个有效节点，当parent进行fist删除时，节点数量已经从2变成了1，所以索引[1]也就不存在，parent.children会进行实时更新


//练习

